<!-- 答题页-按钮列表 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="按钮列表" name="1">
            <si-collapse-group
                v-model="list"
                is-draggable
                :node-title="data => data.title"
            >
                <template #item="{ element, index }">
                    <div class="row-wrap">
                        <div class="left-wrap">
                            是否显示
                        </div>
                        <div class="right-wrap">
                            <el-switch v-model="element.isShow" />
                        </div>
                    </div>
                    
                    <el-divider></el-divider>
                    <div class="row-wrap">
                        <div class="left-wrap">
                            内容
                        </div>
                        <div class="right-wrap">
                            <el-input v-model="list[index].title" />
                        </div>
                    </div>

                    <el-divider></el-divider>
                    <div class="row-wrap">
                        <div class="left-wrap">
                            字体样式
                        </div>
                        <div class="right-wrap">
                            <si-font-style
                                v-model:fontSize="element.style['font-size']"
                                v-model:fontWeight="element.style['font-weight']"
                                v-model:color="element.style.color"
                            />
                        </div>
                    </div>

                    <el-divider></el-divider>
                    <div class="row-wrap">
                        <div class="right-wrap">
                            <si-color-picker
                                v-model="element.style['background-color']"
                                show-alpha
                                label="背景色"
                            />

                            <si-image-picker
                                v-model="element.style['background-image']"
                                type="image"
                                style="margin-left: 30px"
                            />
                        </div>
                    </div>
                </template>
            </si-collapse-group>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import {
    SiColorPicker,
    SiImagePicker,
    SiFontStyle,
    SiCollapseGroup
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'QuestionIndexBtns',
    components: {
        SiColorPicker,
        SiImagePicker,
        SiFontStyle,
        SiCollapseGroup
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        const list = computed({
            get: () => element.value.customFeature.buttonList,
            set: val => element.value.customFeature.buttonList = val
        })

        return {
            list
        }
    }
})
</script>

<style lang="less" scoped>
.row-wrap {
    display: flex;
    align-items: center;
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        flex: 1;
    }
}
</style>